<template>
  <modal-frame
    ref="modalFrame"
    :modalWith="680"
    title="选择分类"
  >
    <el-form :model="model" :label-position="labelPosition" :rules="rules" ref="ruleForm" label-width="124px">
      <div class="row">
        <div class="col-xs-9 col-xs-offset-1">
          <el-form-item label="二级分类名称：" prop="goodTwoCode">
            <el-select v-model="model.goodTwoCode" class="input-max-w">
              <el-option v-for="(item, index) of pictureArr" :label="item.middleClass" :value="item.middleClassNo"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="col-xs-12">
          <p style="padding-left: 94px;color: #606266">
            产品图片：
          </p>
          <div style="padding-left: 180px;color: #606266">
            <upload-image
              ref="uploadImage"
              :formData="{group: 'rotueName'}"
              v-model="model.goodPicture"
              :max="1"
            >
            </upload-image>
          </div>
        </div>
      </div>
    </el-form>
    <div slot="footer">
      <div class="row">
        <div class="col-xs-12">
          <button type="button" class="btn default" @click="hide">取 消</button>
          <button type="button" class="btn green default ladda-button" data-style="zoom-out" @click="saveFun($event)">确
            认
          </button>
        </div>
      </div>
    </div>
  </modal-frame>
</template>

<script>
import uploadImage from 'components/base/uploadImage'
import modalFrame from 'components/base/modalFrame'
import {httpSuccessPost, httpGetDetail} from 'assets/scripts/base/util'
import {copy, alert} from 'assets/scripts/base/functions'

export default {
  name: 'addProductTwoType',
  components: {
    modalFrame,
    uploadImage
  },
  props: {
    goodId: {
      type: String,
      default: ''
    },
    activeMenu: {
      type: String,
      default: ''
    }
  },
  created() {

  },
  data() {
    return {
      isFhbAdminPath: this.$route.fullPath.indexOf('ss-fhb-admin') > 0,
      pictureArr: [],
      model: {
        goodTwoCode: '',
        goodPicture: []
      },
      rules: {
        goodTwoCode: [
          {required: true, message: '请选择二级分类名称！', trigger: 'change'}
        ]
      },
      labelPosition: 'left' // label左对齐
    }
  },
  methods: {
    show() {
      this.$refs.modalFrame.show()
      this.resetForm()
      this.model.goodPicture = []
      this.getProducts()
    },
    hide() {
      this.$refs.modalFrame.hide()
    },
    getProducts() {
      httpGetDetail('ms-fahuobao-order/FhbOrder/getDetailPic', this, {code: this.activeMenu}).then(response => {
        console.log('haha', response)
        this.pictureArr = response
      })
    },
    saveFun(event) {
      this.$refs['ruleForm'].validate(valid => {
        if (!valid) {
          return
        }
        let data = copy(this.model, true)
        // 后端说可以不需要状态state
        // if (!this.isFhbAdminPath) { // 发货宝
        //   data.state = '1'
        // }
        data.goodOneCode = this.activeMenu
        data.goodPicture = data.goodPicture[0]
        if (!data.goodPicture) {
          alert('请上传图片！', '提示', 'warning')
          return
        }
        const loading = window.Ladda.create(event.currentTarget || event.target)
        loading.start()
        console.log('data', data)
        httpSuccessPost('/ms-fahuobao-order/fhbGoodAdmin/saveGoodType', data).then(response => {
          loading.stop()
          if (response.success) {
            this.hide()
            this.$emit('getProducts')
          }
        })
      })
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields()
    }
  }
}
</script>
